import React, { useState, forwardRef, useImperativeHandle } from "react";
import { Modal, Input, Radio } from "antd";
import axios from "../service/index";

export default forwardRef(function EditAdd(props, ref) {
  let [user, setUser] = useState({
    username: "",
    password:"123",
    email: "",
    gender: 1,
    mobile: "",
  });
//   let [addObj, setAddObj] = useState({
//     username: "",
//     password:"",
//     email: "",
//     gender: -1,
//     mobile: "",
//   });
//   let [password, setPassword] = useState("");
  useImperativeHandle(ref, () => {
    // 子组件暴露方法setUser给父组件用，父组件就调用这个方法对当前行编辑的 元素的值赋值给user对象
    return {
      setUser,
    };
  });

  //   清空文本框
  const close = () => {
    setUser({
      username: "",
      password:"",
      email: "",
      gender: 1,
      mobile: "",
    });
  };

  const hideOK = () => {
    // 点击  确认按钮
    if (title === "添加用户") {
      console.log("添加用户");
        axios.post("/api/users/add",user).then((res)=>{
            console.log(res);
            if(res.errNo===0){
                props.getList()
            }
        })
    } else {
      console.log("编辑用户");
      axios.put("/api/users/" + user.id, user).then((res) => {
        console.log(res);
        if (res.errNo === 0) {
          props.getList(props.page);
        }
      });
    }
    setTitleVisible(); // 显示标题内容
    close();
  };
  const hideModal = () => {
    // 点击 取消按钮
    setTitleVisible(); // 显示标题内容
    close();
  };

  const input = (e) => {
    // setUser({...user,[e.target.name]:e.target.value}) // 方法1:会失去焦点，不建议
    setUser((user) => {
      // 方法2：优化，不会失去焦点
      //   console.log(user); // user的内容为：父组件传过来的编辑的所有内容
      if (e.target.name === "mobile") {
        user[e.target.name] = Number(e.target.value);
      } else {
        user[e.target.name] = e.target.value;
      }

      return user;
    });
    // if (e.target.name === "password") {
    //   setPassword(e.target.value);
    // }
    // console.log(password);
    // setAddObj({
    //     [e.target.name]:e.target.value
    // },()=>{
    //     console.log(addObj);
    // })
  };
  let { title, visible, setTitleVisible } = props;
  //   console.log(user); // 点击编辑按钮后，user存储的就是要编辑的所有内容
  return (
    <div>
      <Modal
        title={title}
        open={visible}
        onOk={hideOK}
        onCancel={hideModal}
        okText="确认"
        cancelText="取消"
        destroyOnClose={true}
      >
        <p>
          {/* defaultValue：输入框默认内容 */}
          <Input
            name="username"
            defaultValue={user.username}
            onChange={input}
            key={user.username}
          />
        </p>
        <p>
          <Input
            name="password"
            defaultValue={user.password}
            onChange={input}
            key={user.password}
          />
        </p>
        <p>
          <Input
            name="email"
            defaultValue={user.email}
            onChange={input}
            key={user.email}
          />
        </p>
        {/* 单选按钮 */}
        <div>
          <Radio.Group
            name="gender"
            defaultValue={Number(user.gender)}
            onChange={input}
            key={Number(user.gender)}
          >
            <Radio value={1}>男</Radio>
            <Radio value={2}>女</Radio>
            <Radio value={3}>保密</Radio>
          </Radio.Group>
        </div>
        <p>
          <Input
            name="mobile"
            defaultValue={user.mobile}
            onChange={input}
            key={user.mobile}
          />
        </p>
      </Modal>
    </div>
  );
});
